<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=bar-simple
-->
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <title>Gender Semester Chart</title>
    <!-- 引入ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script>
    <!-- 引入jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<td>
    <th>

</th>
</td>
<body style="height: 200%; margin: 0">
<div id="container" style="width: 600px; height: 400px;""></div>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('container'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '每学期男女生人数'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data:['男生','女生']
        },
        xAxis: {
            type: 'category',
            data: [1,2,3,4] // 这里的数据将从服务器获取
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '男生',
                type: 'bar',
                data:[1,2,3,4] // 这里的数据将从服务器获取
            },
            {
                name: '女生',
                type: 'bar',
                data: [] // 这里的数据将从服务器获取
            }
        ]
    };
    myChart.setOption(option);
    // 使用刚指定的配置项和数据显示图表。


    // 发送Ajax POST请求到Servlet获取数据
    $.post('gendersemester', function(data) {
        // 假设返回的数据是一个数组，每个元素包含semester、man和woman属性
        myChart.setOption({
            xAxis: {
                data: data.map(function(item) { return item.semester; })
            },
            series: [
                {
                    name: '男生',
                    data: data.map(function(item) { return item.man; })
                },
                {
                    name: '女生',
                    data: data.map(function(item) { return item.woman; })
                }
            ]
        });
    }, 'json');

</script>
</body>
</html>
